<template>
  <q-dialog v-model="visible">
    <q-card :class="ui.cardClass">
      <q-card-section>
        <div class="text-h6">{{ $t(lang + "坐标系选择") }}</div>
      </q-card-section>
      <q-separator :dark="ui.isDark" />
      <q-card-section class="q-gutter-y-md">
        <q-select
          :dark="ui.isDark"
          style="min-width: 15rem"
          outlined
          behavior="menu"
          v-model="targetFrame"
          :options="options"
          :use-input="!targetFrame"
          clearable
          :label="$t(lang + '参考坐标')"
          emit-value
          map-options
        />
        <q-select
          :dark="ui.isDark"
          style="min-width: 15rem"
          outlined
          behavior="menu"
          v-model="sourceFrame"
          :options="options"
          :use-input="!sourceFrame"
          clearable
          :label="$t(lang + '工具坐标')"
          emit-value
          map-options
        />
      </q-card-section>
      <q-slide-transition>
        <div v-if="sourceFrame && targetFrame">
          <q-btn
            no-caps
            stretch
            class="full-width"
            :class="ui.btnClass"
            :label="$t(lang + '获取坐标数据')"
            icon="check"
            @click="getPosture"
          />
        </div>
      </q-slide-transition>
      <!-- 弹窗内loading -->
      <q-inner-loading
        :showing="loading"
        :label="$t(lang + '加载坐标系列表')"
        label-class="text-teal"
        label-style="font-size: 1.1rem"
      />
    </q-card>
  </q-dialog>
</template>

<script setup>
import { api } from "boot/axios.js";
import { useAPIStore } from "stores/api/index.js";
import { ref } from "vue";
import { useUiStore } from "stores/ui";

const lang = "routeManage.GetPosture.";
const ui = useUiStore();
const visible = ref(false);
const targetFrame = ref("arm_base"); // 参考坐标
const sourceFrame = ref("flange"); // 工具坐标
const loading = ref(false); // loading效果
const options = ref([]);

defineExpose({ show });
const emit = defineEmits(["getPosture"]);

function show() {
  visible.value = true;
  getFrameList();
}

// 获取坐标系选项
function getFrameList() {
  loading.value = true;
  api
    .post(
      useAPIStore().amrUrl + "ros/call",
      {},
      { params: { service: "tf/list_frames" } }
    )
    .then((res) => {
      options.value = res.data.values.frames;
      loading.value = false;
    });
}

// 获取当前姿态
function getPosture() {
  visible.value = false;
  emit("getPosture", targetFrame.value, sourceFrame.value);
}
</script>
